<template>
  <a-spin :spinning="loading">
    <a-card style="margin-top: 24px" :bordered="false" title="自我管理行为量表(SDSCA)">
      <a-button slot="extra" type="danger" @click="exit"> 返回首页 </a-button>
      <div class="table-operator" style="border-top: 5px">
        <a-button type="danger" @click="add" :disabled="buttonStatus"> 填写量表 </a-button>
      </div>

      <a-tabs v-model="activeKey" hide-add @click="changeSdsca()" @edit="onEdit">
        <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
          {{ pane.content }}
        </a-tab-pane>
      </a-tabs>
      <div class="container">
        <div class="width90">
          <a-form-model-item layout="inline" label="评估结果" v-if="evalution1.output">
            <span class="ant-form-text">
              {{ evalution1.output }}
            </span>
          </a-form-model-item>
          <h4 class="decision_title eval_diet"><a-icon type="coffee" style="color: red; margin-right: 5px" />饮食</h4>
          <a-form-model-item label="1、在过去7天中，您有多少天，按照健康的饮食计划来进食">
            <a-radio-group v-model="radios.radio1" :options="options" />
          </a-form-model-item>
          <a-form-model-item
            label="          2、在过去7天中，您有多少天，一天所吃的蔬菜水果加起来超过5份（如：吃蔬菜 3 碟、水果 2
            个。水果一份约橘子一个，木 瓜 1/3 个…等；蔬菜一份 100 公克，约1碟）"
          >
            <a-radio-group v-model="radios.radio2" :options="options" />
          </a-form-model-item>
          <a-form-model-item label="3、在过去 7 天中，您有多少天吃油脂多的食物（如：油炸食物、肥肉、鸡皮等）">
            <a-radio-group v-model="radios.radio3" :options="options" />
          </a-form-model-item>

          <h4 class="eval_diet"><a-icon type="fire" style="color: red; margin-right: 5px" />运动</h4>
          <a-form-model-item
            label="   4、在过去 7 天中，您有多少天，有做 30 分钟以上的活动（指身体持续活动超过 30 分钟，包括：走路、做家事）"
          >
            <a-radio-group v-model="radios.radio4" :options="options" />
          </a-form-model-item>
          <a-form-model-item
            label="5、在过去7天中，除了工作及做家事以外，您有多少天，有另外时间去做运动（如：慢跑、爬山、太极拳、土风舞等）"
          >
            <a-radio-group v-model="radios.radio5" :options="options" />
          </a-form-model-item>

          <h4 class="eval_diet"><a-icon type="bell" style="color: red; margin-right: 5px" />用药</h4>
          <a-form-model-item
            label="6、在过去7天中，您有多少天，有照医师指示定时定量服用降血糖的药（医嘱不需服降血糖药者，不用回答此题）"
          >
            <a-radio-group v-model="radios.radio6" :options="options" />
          </a-form-model-item>

          <h4 class="eval_diet"><a-icon type="heart" style="color: red; margin-right: 5px" />血糖监测</h4>
          <a-form-model-item label="7、在过去7天中，您有多少天，在家自己（或家人帮忙）量血糖">
            <a-radio-group v-model="radios.radio7" :options="options" />
          </a-form-model-item>
          <a-form-model-item
            label=" 8、在过去7天中，您有多少天，依照医师指示的血糖测量标准次数（例如1天量血糖两次）在家按时自己（或家人帮忙）量血糖"
          >
            <a-radio-group v-model="radios.radio8" :options="options" />
          </a-form-model-item>

          <h4 class="eval_diet"><a-icon type="security-scan" style="color: red; margin-right: 5px" />足部检查</h4>
          <a-form-model-item label="9、在过去7天中，您有多少天，检查您的双脚（包括脚趾、脚板与脚底）">
            <a-radio-group v-model="radios.radio9" :options="options" />
          </a-form-model-item>
          <a-form-model-item
            label="10、在过去7天中，您有多少天，在穿鞋之前先检查鞋内的情形（如：鞋内有无小石头，是否平整、有无破损或潮湿等）"
          >
            <a-radio-group v-model="radios.radio10" :options="options" />
          </a-form-model-item>
          <a-form-model-item label="11、在过去7天中，您有多少天在洗完脚后将脚擦干，并保持脚趾间干燥">
            <a-radio-group v-model="radios.radio11" :options="options" />
          </a-form-model-item>
          <a-form-model-item
            label="12、在过去7天中，您有多少天在出门时，都有穿合适的鞋子（例如没有穿露脚趾的拖鞋或凉鞋而穿包鞋）"
          >
            <a-radio-group v-model="radios.radio12" :options="options" />
          </a-form-model-item>

          <div class="footer">
            <a-button
              v-if="!evalution1.output"
              :loading="saveLoading"
              style="margin-left: 500px; margin-top: 15px; margin-bottom: 1px"
              type="danger"
              @click="postSdsca()"
            >
              评估
            </a-button>
            <div class="tall-text">
              <p>自我管理评估计分方法</p>
              <p>
                日常生活自我照顾活动表（SDSCA）包括了饮食、运动、用药、血糖监测、足部检查五个维度的内容，共12个条目。
              </p>
              <p>各维度平均分:</p>
              <p>饮食: 1~3题的平均分, 第3题为反向计分, 即0= 7, 1= 6, 2= 5, 3=4, 4= 3, 5= 2, 6= 1, 7= 0</p>
              <p>用药：6题的得分</p>
              <p>运动: 4~ 5题的平均分</p>
              <p>血糖测试: 7~ 8题的平均分</p>
              <p>足部检查: 9~ 12题的平均分</p>
              <p>结果分析判断: 总得分最高分（各维度最高平均分相加）为35 分, 单项最高分为7 分</p>
              <p>自我管理评分分级方法: 好: 总分> 29 分, 单项> 5.6 分</p>
              <p>一般: 总分21~ 29分, 单项者5.6~ 4.2分</p>
              <p>差: 总分&lt; 21 分,单项&lt; 4.2分</p>
              <p>得分越高, 自我管理的水平越高</p>
            </div>
          </div>
        </div>
      </div>
    </a-card>
  </a-spin>
</template>

<script>
import { EvalutionMixin } from '@/mixins/EvalutionMixin'
import { PAGE_MENU_TYPE } from '@/store/mutation-types'

const options = [
  { label: '0天', value: 0 },
  { label: '1天', value: 1 },
  { label: '2天', value: 2 },
  { label: '3天', value: 3 },
  { label: '4天', value: 4 },
  { label: '5天', value: 5 },
  { label: '6天', value: 6 },
  { label: '7天', value: 7 }
]
export default {
  name: 'Sdsca',
  mixins: [EvalutionMixin],

  data() {
    var panes = []

    return {
      sdsca: {},
      evalution1: {
        output: ''
      },
      options,
      input: [],
      savaRes: [],
      activeKey: panes.content,
      queryParam: { patientId: this.$route.query[PAGE_MENU_TYPE.PatientId] },
      buttonStatus: false,

      panes,
      newTabIndex: 0,
      radios: {
        radio1: '',
        radio2: '',
        radio3: '',
        radio4: '',
        radio5: '',
        radio6: '',
        radio7: '',
        radio8: '',
        radio9: '',
        radio10: '',
        radio11: '',
        radio12: ''
      },
      url: {
        postSdsca: '105/01/1050101',
        getSdsca: '105/01/1050103'
      }
    }
  },
  methods: {
    getId() {
      if (this.queryParam.patientId == undefined) {
        var status = window.location.search.slice(11)
        localStorage.setItem('patientId', status)
      }
    },

    callback(key) {
      console.log(key)
    },
    onEdit(targetKey, action) {
      this[action](targetKey)
    },
    exit() {
      const patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      let query = {}
      query[PAGE_MENU_TYPE.ParamsField] = PAGE_MENU_TYPE.HealthManage
      query[PAGE_MENU_TYPE.PatientId] = patientId
      this.$router.push({
        path: '../index',
        query
      })
    },

    add() {
      this.buttonStatus = true
      this.evalution1.output = ''
      this.radios = []
      const panes = this.panes
      const activeKey = `newTab${this.newTabIndex++}`
      panes.unshift({
        title: '请开始填写',
        key: activeKey,
        closable: false
      })
      this.panes = panes
      this.activeKey = activeKey
    },
    remove(targetKey) {
      let activeKey = this.activeKey
      let lastIndex
      this.panes.forEach((pane, i) => {
        if (pane.key === targetKey) {
          lastIndex = i - 1
        }
      })
      const panes = this.panes.filter(pane => pane.key !== targetKey)
      if (panes.length && activeKey === targetKey) {
        if (lastIndex >= 0) {
          activeKey = panes[lastIndex].key
        } else {
          activeKey = panes[0].key
        }
      }
      this.panes = panes
      this.activeKey = activeKey
    }
  },
  created() {
    this.getId()
    this.getSdsca()
  }
}
</script>
<style scoped>
.container {
  background-color: #fff;
  margin: 0 auto;
}
.title {
  width: 100%;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  color: #333333;
  margin: 15px 0;
}
.tall-text {
  font-size: 12px;
  margin: 20px auto;
  background-color: #f7f7f7;
  padding: 10px;
  border-radius: 5px;
}
p {
  margin: 5px;
}
.eval_p {
  margin: 15px 10px;
}
.eval_diet {
  margin-top: 15px;
  font-size: 16px;
}
.width90 {
  width: 90%;
  margin: 0 auto;
}
</style>
